<template>
    <view class="flex-card">
        <view class="flex-item" style="font-size: 24rpx;">
            <span style="text-align: center;">{{ title }}</span>
        </view>
        <view class="flex-item">
            <text :style="displayValue.length > 10 ? 'font-size: 28rpx' : ''">{{ displayValue }}{{ props.suffix ||
                ''}}</text>
        </view>
        <view class="flex-item" v-if="compareTitle">
            <eui-text :title="compareTitle" :value="formatValue" :precision="precision" titleStyle="font-size: 22rpx;"
                valueStyle="font-size: 22rpx;" type="name" />
        </view>
        <view :class="['flex-item', (direction >= 0 ? 'extra_up' : 'extra_down')]" style="font-size: 24rpx;"
            v-if="showRate">
            {{ (direction >= 0 ? '+' : '-') }}{{ compareRaito }}
        </view>
    </view>

</template>

<script setup type="ts">
import { ref, defineProps, watch, computed, reactive } from 'vue';
import numeral from 'numeral';
const props = defineProps({
    value: {
        type: Number,
        default: null,
    },
    compareValue: {
        type: Number,
        default: null,
    },
    title: {
        type: String,
        default: null,
    },
    compareTitle: {
        type: String,
        default: null,
    },
    method: {
        type: String,
        default: 'raito',
    },
    suffix: {
        type: String,
        default: null,
    },
    precision: {
        type: Number,
        default: 2,
    },
    showRate: {
        type: Boolean,
        default: true,
    },
});


const value = ref(null);
const compareValue = ref(null);
const title = ref(null);
const compareTitle = ref(null);


watch(
    () => props.value,
    (v) => {
        value.value = v ?? 0;
    },
    {
        immediate: true,
        deep: true,
    }
)

watch(
    () => props.compareValue,
    (v) => {
        compareValue.value = v;
    },
    {
        immediate: true,
        deep: true,
    }
)

watch(
    () => props.title,
    (v) => {
        title.value = v;
    },
    {
        immediate: true,
        deep: true,
    }
)
watch(
    () => props.compareTitle,
    (v) => {
        compareTitle.value = v;
    },
    {
        immediate: true,
        deep: true,
    }
)
// const valueInt = computed(()=> parseInt(value.value).toFixed(0))
// const valueFloat = computed(()=> ((parseFloat(value.value) - parseInt(value.value))*100).toFixed(0))

const compareRaito = computed(() => {
    if (props.method == 'raito') {
        const raito = Math.abs(compareValue.value == 0 ? 0 : (value.value - compareValue.value) / compareValue.value * 100) || 0
        return `${raito.toFixed(2)}%`;
    } else if (props.method == 'original') {
        const raito = Math.abs(value.value)
        return `${raito.toFixed(2)}%`;
    } else if (props.method == 'rate') {
        const raito = Math.abs(value.value - compareValue.value) || 0
        return `${raito.toFixed(2)}%`;
    }
    else {
        const raito = Math.abs(value.value - compareValue.value).toFixed(2)
        return raito;
    }
})

const getFormatTemplate = () => {
  let template = '0,0';
  if (props.precision> 0) {
    template += '.' + '0'.repeat(props.precision);
  }
  return template;
};

const formatValue = computed(() => {
    if (typeof compareValue.value === 'number') {
        return numeral(compareValue.value).format(getFormatTemplate());
    } else {
        return value;
    }
});

const direction = computed(() => {
    if (props.method == 'original') {
        return value.value >= 0;
    }
    else {
        return value.value - compareValue.value;
    }
})

const displayValue = computed(() => {
    try {
        if (typeof value.value === 'number') {
            return numeral(value.value).format(getFormatTemplate());
        } else {
            return value.value;
        }
    } catch (e) {
        console.error(e);
        return value.value;
    }
});

</script>

<style lang="scss" scoped>
@import '../../../main.scss';
@import '../../../static/font/enjoyicon5.0/iconfont.css';


.flex-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    .extra_down {
        color: green;
    }

    .extra_up {
        color: red;
    }

    .flex-item {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        width: 100%;

        span {
            color: #888888;
            margin: 10rpx 0rpx;
            // font-size: 0.9rem;
            // margin: 0;
            // padding: 0;
            // line-height: 1rem;
        }

        text {
            font-size: 32rpx;
            // font-size: 0.9rem;
            // margin-left: 10rpx;
        }

        view {
            flex-grow: 0;
            margin: 2rpx;
        }

    }

    .flex-item:first-child {
        label {
            // font-weight: bold;
            // font-size: 0.9rem;
        }

        text {
            // font-size: 38rpx;
            // font-weight: bold;
            // margin-left: 0;
        }
    }
}
</style>